<template>
  <el-card class="container-card">
    <!-- 提示信息 -->
    <el-alert
      title="完善企业信息"
      type="info"
      description="如实完善企业详细信息，能获得更多求职者的青睐"
      show-icon
      style="margin-bottom: 20px"
    >
    </el-alert>

    <!-- 企业信息表单 -->
    <el-form
      :model="enterpriseInfo"
      :rules="rules"
      ref="enterpriseInfo"
      label-width="150px"
      class="enterpriseInfoData"
    >
      <el-form-item label="企业LOGO：" prop="elogo">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          list-type="picture-card"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="企业全称：" prop="ename">
        <el-input
          v-model="enterpriseInfo.ename"
          placeholder="请与贵公司营业执照注册名称保持一致"
        ></el-input>
      </el-form-item>
      <el-form-item label="从事行业：" prop="industry">
        <el-select
          v-model="enterpriseInfo.industry"
          filterable
          placeholder="请选择从事行业"
        >
          <el-option
            v-for="item in industryOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="企业性质：" prop="nature">
        <el-select
          v-model="enterpriseInfo.nature"
          filterable
          placeholder="请选择企业性质"
        >
          <el-option
            v-for="item in natureOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="企业规模：" prop="scale">
        <el-select
          v-model="enterpriseInfo.scale"
          filterable
          placeholder="请选择企业规模"
        >
          <el-option
            v-for="item in scaleOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创办日期：" prop="establishDate">
        <el-date-picker
          v-model="enterpriseInfo.establishDate"
          type="date"
          placeholder="请选择创办日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="注册资金：" prop="capital">
        <el-row>
          <el-col :span="8">
            <el-input
              v-model.number="enterpriseInfo.capital"
              style="width: 95%"
              placeholder="请填写注册资金"
            ></el-input>
          </el-col>
          <el-col :span="1" style="margin-left: 5px">
            <b>万元</b>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="所在地区：" prop="location">
        <el-cascader
          size="large"
          :options="options"
          v-model="enterpriseInfo.location"
          @change="handleChange"
          style="width: 50%"
          placeholder="请选择所在地区"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="详细地址：" prop="detAddress">
        <el-autocomplete
          v-model="mapLocation.address"
          :fetch-suggestions="querySearch"
          placeholder="请输入详细地址，如XX市XX区XXX大楼XXXX单元"
          :trigger-on-focus="false"
          @select="handleSelect"
          style="width: 50%"
        />
      </el-form-item>
      <div
        style="
          margin-left: 110px;
          margin-bottom: 20px;
          width: 50%;
          border: 2px solid rgb(119, 114, 114);
        "
      >
        <baidu-map
          class="bm-view"
          :center="mapCenter"
          :zoom="mapZoom"
          :scroll-wheel-zoom="true"
          ak="O1u1uaNZnETQSsvB7V9nHGXVHesyoRVS"
          @ready="handlerBMap"
        />
      </div>

      <el-form-item label="企业简介：" prop="introduction">
        <!-- <el-input
          type="textarea"
          v-model="enterpriseInfo.introduction"
          placeholder="请输入企业简介"
          maxlength="120"
          show-word-limit
          style="width: 50%"
        ></el-input> -->
        <quill-editor
          style="width: 50%"
          v-model="enterpriseInfo.introduction"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </el-form-item>

      <el-form-item>
        <el-button
          size="medium"
          round
          type="primary"
          style="width: 20%; margin: 20px"
          @click="submitForm('enterpriseInfo')"
        >
          保存信息
        </el-button>
        <el-button size="medium" round @click="resetForm('enterpriseInfo')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { industryOption, natureOption, scaleOption } from "./enum";
import { regionData } from "element-china-area-data";
export default {
  components: {
    BaiduMap,
    quillEditor,
  },
  data() {
    return {
      content: ``,
      str: "",
      editorOption: {}, //富文本剪辑器

      options: regionData,
      enterpriseInfo: {
        imageUrl: "", //LOGO图片路径
        ename: "", //企业全称
        industry: "", //从事行业
        nature: "", //企业性质
        scale: "", //企业规模
        establishDate: "", //创办时间
        capital: "", //注册资金
        detAddress: "", //详细地址
        introduction: "", //企业简介
        location: [], //所在地区
      },
      industryOption, //从事行业选项
      natureOption, //企业性质选项
      scaleOption, //企业规模选项
      mapZoom: 15,
      mapCenter: { lng: 0, lat: 0 },
      mapLocation: {
        address: undefined,
        coordinate: undefined,
      },
      rules: {
        ename: [
          { required: true, message: "请填写企业全称", trigger: "change" },
        ],
        industry: [
          { required: true, message: "请选择从事行业", trigger: "change" },
        ],
        nature: [
          { required: true, message: "请选择企业性质", trigger: "change" },
        ],
        scale: [
          { required: true, message: "请选择企业规模", trigger: "change" },
        ],
        location: [
          { required: true, message: "请选择企业所在地区", trigger: "change" },
        ],
        establishDate: [
          {
            type: "date",
            required: true,
            message: "请选择创办日期",
            trigger: "change",
          },
        ],
        capital: [
          { required: true, message: "请填写创办资金", trigger: "change" },
          {
            type: "number",
            message: "注册资金必须为数字值",
            trigger: "change",
          },
        ],
        introduction: [
          { required: true, message: "请填写企业简介", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handlerBMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.mapCenter.lng = this.mapLocation.coordinate.lng;
        this.mapCenter.lat = this.mapLocation.coordinate.lat;
        this.mapZoom = 15;
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate));
      } else {
        this.mapCenter.lng = 113.271429;
        this.mapCenter.lat = 23.135336;
        this.mapZoom = 10;
      }
    },
    querySearch(queryString, cb) {
      var that = this;
      var myGeo = new this.BMap.Geocoder();
      myGeo.getPoint(
        queryString,
        function (point) {
          if (point) {
            that.mapLocation.coordinate = point;
            that.makerCenter(point);
          } else {
            that.mapLocation.coordinate = null;
          }
        },
        this.locationCity
      );
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i);
              var item = { value: x.address + x.title, point: x.point };
              s.push(item);
              cb(s);
            }
          } else {
            cb();
          }
        },
      };
      var local = new this.BMap.LocalSearch(this.map, options);
      local.search(queryString);
    },
    handleSelect(item) {
      var { point } = item;
      this.mapLocation.coordinate = point;
      this.makerCenter(point);
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays();
        this.map.addOverlay(new this.BMap.Marker(point));
        this.mapCenter.lng = point.lng;
        this.mapCenter.lat = point.lat;
        this.mapZoom = 15;
      }
    },

    handleChange(value) {
      console.log(value);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "保存成功",
            type: "success",
          });
          // this.$router.replace('/enterprise-info/baseInfo');
        } else {
          this.$message({
            showClose: true,
            message: "出错了，请检查企业信息是否填写正确。",
            type: "error",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    let content = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #000000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.container-card {
  margin: 13px;
  height: 100%;
}
.bm-view {
  width: 100%;
  height: 250px;
}
.el-input {
  width: 50%;
}
.el-select {
  width: 50%;
}
</style>
